<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="referrer" content="never">
    <title>鲜花部分设计师臻选鲜花</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2345015_3rxgf0otp6c.css

    ">
    <script src="./js/rem.js"></script>
    <link rel="stylesheet" href="./css/gzbxh-sjsk.css">

</head>

<body>
    <div class="xh">
        <!-- 头部部分 -->
        <div class="header">
            <div class="header-left">
            </div>
            <div class="header-conter">设计师臻选鲜花</div>
            <a class="header-item" href="javascript:;">
                <span></span>
                <p class="kefu">客服</p>
            </a>
            <div class="header-right"></div>

        </div>

        <div class="nav">
            <div class="nav-list">
                <a class="nav-item" href="javascript:;">
                    <span class="nav-a"></span>
                    <p>首页</p>
                </a>
                <a class="nav-item" href="javascript:;">
                    <span class="nav-b"></span>
                    <p>分类</p>
                </a>
                <a class="nav-item" href="javascript:;">
                    <span class="nav-c"></span>
                    <p>购物车</p>
                </a>
                <a class="nav-item" href="javascript:;">
                    <span class="nav-d"></span>
                    <p>我的</p>
                </a>
            </div>
          
        </div>
        <!-- 内容部分 -->
        <div class="container">
            <div class="con">
                <div class="banner">
                    <div class="banner-title">
                        <div ></div>
                        <p>送出的每束花均由资深花艺师亲手制作</p>
                    </div>
                    <div class="banner-desc">30多个核心城市已开通服务,其他城市陆续开通中…
                        <p></p>
                    </div>
                    <div class="banner-item">
                            <li class="banner-a">精选稀有花材，给你不一样的视觉享受</li>
                            <li class="banner-b">送前花束实拍，效果提前知道</li>
                            <li class="banner-c">VIP客服一对一服务,全程尽享尊贵体验</li>
                    </div>
                </div>
            </div>
            <div class="ta">
                <div class="ta-title">高端花盒系列</div>
                <div class="ta-conter">
                   <a class="ta-item" href="javascript:;">
                       <div class="ta-top">
                           <img src="https://img02.hua.com/zhuanti/sumptuousflower/m/9012300.jpg" alt="">
                       </div>
                       <div class="ta-bottom">
                           <div class="ta-in">
                               <div class="in-left">
                                   <p>赤道花园</p>
                                   <div>红拂玫瑰
                                       <span>76cm长形礼盒</span>
                                   </div>
                               </div>
                               <div class="in-right">
                                   <p>RMB</p>
                                   <div>599</div>
                               </div>
                           </div>
                           <div class="ta-fo">采撷最娇艳的玫瑰，经设计师妙手点拨，将芬芳馥郁的气息融入，轻轻打开，芬芳扑面袭来，沉醉在那花香醉人的奇幻世界。</div>
                       </div>
                   </a>
                   <a class="ta-items" href="javascript:;">
                    <div class="ta-top">
                        <img src="https://img02.hua.com/zhuanti/sumptuousflower/m/9012296.jpg" alt="">
                    </div>
                    <div class="ta-bottom">
                        <div class="ta-in">
                            <div class="in-left">
                                <p>情迷尼斯</p>
                                <div>糖果玫瑰
                                    <span>76cm长形礼盒</span>
                                </div>
                            </div>
                            <div class="in-right">
                                <p>RMB</p>
                                <div>599</div>
                            </div>
                        </div>
                        <div class="ta-fo">糖果玫瑰如其名，有着甜美的色彩和香味。为玫瑰定制了专属的礼盒，完美的细节彰显品质。</div>
                    </div>
                </a>
                <a class="ta-item" href="javascript:;">
                    <div class="ta-top">
                        <img src="https://img02.hua.com/zhuanti/sumptuousflower/m/9012297.jpg" alt="">
                    </div>
                    <div class="ta-bottom">
                        <div class="ta-in">
                            <div class="in-left">
                                <p>邂逅西雅图</p>
                                <div>新娘玫瑰
                                    <span>76cm长形礼盒</span>
                                </div>
                            </div>
                            <div class="in-right">
                                <p>RMB</p>
                                <div>599</div>
                            </div>
                        </div>
                        <div class="ta-fo">新娘玫瑰有着偏成熟韵味的色彩，有着厚实的花瓣、笔直的枝条，毫不逊色于其他赤道玫瑰。为玫瑰定制了专属的礼盒，完美的细节彰显品质。</div>
                    </div>
                </a>
                <a class="ta-item" href="javascript:;">
                    <div class="ta-top">
                        <img src="https://img02.hua.com/zhuanti/sumptuousflower/m/9012298.jpg" alt="">
                    </div>
                    <div class="ta-bottom">
                        <div class="ta-in">
                            <div class="in-left">
                                <p>天使之吻</p>
                                <div>红袖玫瑰
                                    <span>76cm长形礼盒</span>
                                </div>
                            </div>
                            <div class="in-right">
                                <p>RMB</p>
                                <div>599</div>
                            </div>
                        </div>
                        <div class="ta-fo">红袖玫瑰有着罕见的双层色彩，渐变的颜色让人迷恋。为玫瑰定制了专属的礼盒，完美的细节彰显品质。</div>
                    </div>
                </a>
                <a class="ta-item" href="javascript:;">
                    <div class="ta-top">
                        <img src="https://img02.hua.com/zhuanti/sumptuousflower/m/9012299.jpg" alt="">
                    </div>
                    <div class="ta-bottom">
                        <div class="ta-in">
                            <div class="in-left">
                                <p>瓦尔登湖畔</p>
                                <div>小白兔玫瑰
                                    <span>76cm长形礼盒</span>
                                </div>
                            </div>
                            <div class="in-right">
                                <p>RMB</p>
                                <div>599</div>
                            </div>
                        </div>
                        <div class="ta-fo">小白兔玫瑰如它的名字一般，透着可爱的气质。为玫瑰定制了专属的礼盒，完美的细节彰显品质。</div>
                    </div>
                </a>
                </div>
            </div>
            <div class="iner">
                <div class="iner-title">主题花束系列</div>
                <div class="inner-last">
                   
                </div>
                <!-- <a class="ta-item" href="javascript:;">
                    <div class="ta-top">
                        <img src="https://img02.hua.com/zhuanti/sumptuousflower/m/9012323.jpg" alt="">
                    </div>
                    <div class="ta-bottom">
                        <div class="ta-in">
                            <div class="in-left">
                                <p>火热的爱</p>
                                <div>爱情系列之热情奔放
                                </div>
                            </div>
                            <div class="in-right">
                                <p>RMB</p>
                                <div>499</div>
                            </div>
                        </div>
                        <div class="ta-fo">饱满圆润的花头，紧促的拥抱在一起，红玫瑰与多头红玫瑰的组合，大大小小的花苞们，像极了轻盈的泡泡，花瓣就像裙裾一样层层叠叠，正是我向往中的那片花海，红玫表达的爱简单直接而炙热，除了爱你还是爱你。此花束适合送给热恋中人。</div>
                    </div>
                </a> -->
            </div>
        </div>

        <!-- 回到顶部 -->
        <div class="go">
            <p></p>
        </div>
         <!-- 耳机弹窗 -->
        <!-- 人工客服谷谷 -->
        <div class="chat">
            <div class="chat-top">
                <span class="chat-ber">谷谷</span>
                <span class="chat-sj iconfont icon-down"></span>
            </div>
            <div class="chat-bottom">
                <div class="btn-top">
                    <div class="btn-item">
                        <img src="https://tenant-assets.meiqiausercontent.com/avatars/111117/gzZ0/yJdp9JhqPVtOpczqtHja.jpg" alt="">
                        <div class="base">
                            <div class="msg"></div>
                            <div class="per">
                                您好，我是您的专属订花顾问谷谷，请问有什么可以帮您？
                            </div>

                        </div>
                    </div>
                    <div class="btn-conter"></div>
                </div>
                <div class="btn-bottom">
                    <div class="tip-top">
                        <i class="xl iconfont icon-xiaolian"></i>
                        <i class="tb iconfont icon-tupian"></i>
                        <i class="zan iconfont icon-zan"></i>
                        
                    </div>
                    <div class="tip-bottom">
                        <input class="input" placeholder="请输入" type="text">
                        <div class="fs">发送</div>
                    </div>
                    <div class="xlitem">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </div>
                    <div class="zanitem">
                        <div class="zan-top">
                            <div class="zan-one">您对本次服务满意吗？
                                <i class="gb"></i>
                            </div>
                            <div class="zan-two">
                                <div class="eval">
                                    <p class="evala-img"></p>
                                    <p class="eval-desc">好评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalb-img"></p>
                                    <p class="eval-desc">中评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalc-img"></p>
                                    <p class="eval-desc">差评</p>
                                </div>
                            </div>
                            <div class="zan-three">
                                
                                <textarea placeholder="请填写评价内容（选填）" ></textarea>
                                <a class="zan-four" href="javascript:;">提交</a>
                            </div>
                        </div>
                        <div class="zan-top"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 机器人客服小花 -->
        <div class="chat">
            <div class="chat-top">
                <span class="chat-ber">机器人客服小花</span>
                <span class="chat-sj iconfont icon-down"></span>
            </div>
            <div class="chat-bottom">
                <div class="btn-top">
                    <div class="btn-item">
                        <img src="https://tenant-assets.meiqiausercontent.com/pics.meiqia.bucket/86d1d383c0f6cf72" alt="">
                        <div class="base">
                            <div class="msg"></div>
                            <div class="pers">
                              <div class="pers-top">欢迎光临Hua.com花礼网，我是机器人客服小花，很高兴为您服务！我们提供很多精美的鲜花、蛋糕、礼品款式，适用于各类送礼场景，24小时均可自助下单哦~现在客服MM们都下班啦，如需咨询，请您选择留言，我们一定会在上班后第一时间回复您，谢谢~  </div>
                              <div class="pers-bottom">
                                  <div class="pers-one"></div>
                                  <div class="pers-two">常见问题:</div>
                                  <div class="pers-three">
                                      <p>1. 可以送花吗？</p>
                                      <p>2. 怎么下单呢？</p>
                                      <p>3. 请问下单多久可以送到？</p>
                                      <p>4. 请问有哪些支付方式？</p>
                                  </div>
                                  <div class="pers-five">点击问题或回复数字查看答案</div>
                              </div>
                            </div>

                        </div>
                    </div>
                    <div class="btn-conter"></div>
                </div>
                <div class="btn-bottom">
                    <div class="tip-top">
                        <i class="xl iconfont icon-xiaolian"></i>
                        <i class="tb iconfont icon-tupian"></i>
                        
                    </div>
                    <div class="tip-bottom">
                        <input class="input" placeholder="请输入" type="text">
                        <div class="fs">发送</div>
                    </div>
                    <div class="xlitem">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </div>
                    <div class="zanitem">
                        <div class="zan-top">
                            <div class="zan-one">您对本次服务满意吗？
                                <i class="gb"></i>
                            </div>
                            <div class="zan-two">
                                <div class="eval">
                                    <p class="evala-img"></p>
                                    <p class="eval-desc">好评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalb-img"></p>
                                    <p class="eval-desc">中评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalc-img"></p>
                                    <p class="eval-desc">差评</p>
                                </div>
                            </div>
                            <div class="zan-three">
                                <textarea placeholder="请填写评价内容（选填）" ></textarea>
                                <a class="zan-four" href="javascript:;">提交</a>
                            </div>
                        </div>
                        <div class="zan-top"></div>
                    </div>
                </div>
            </div>
        </div>



    </div>

    <script src="./js/jquery.js"></script>
    <script>
      
        ! function header() {
            //页头  点击事件
            var flag = true;
            $('.header-right').click(function () {
                if (flag) {
                    $('.nav').addClass('active')
                    flag = false;
                } else {
                    $('.nav').removeClass('active')
                    flag = true;
                }
            })

            // 点击返回上一页
            $('.header-left').click(function () {
                history.go(-1)
                 // window.location.href='./gzbxh.html';
            })

             // 回到顶部
            $('.go').click(function () {
                $('html,body').stop().animate({
                    scrollTop: 0
                }, 1000)
            })

            // 点击客服
            var robot = new Date()
            var roboth = robot.getHours()
            $('.kefu').click(function(){
                if (roboth >= 8 && roboth <=20) {
                    $('.chat').eq(0).show();
                } else {
                    $('.chat').eq(1).show();
                }
            })

        }()

        //  页面初始化 发起josn请求
         !function(){
           
            play()
            // 清除内容

            function play() {
            $.ajax({
                url: './api/sjsk.json',
                method: 'get',
                dataType: 'json',
                success: function (data) {
                    if (data.code == 200) {
                        var html = '';
                        data.data.forEach(function (item) {
                            html += `
                            <a class="ta-item" href="javascript:;">
                        <div class="ta-top">
                            <img src="${item.imgurl}" alt="">
                        </div>
                        <div class="ta-bottom">
                            <div class="ta-in">
                                <div class="in-left">
                                    <p>${item.title}</p>
                                    <div>${item.titles}
                                    </div>
                                </div>
                                <div class="in-right">
                                    <p>${item.price}</p>
                                    <div>${item.prices}</div>
                                </div>
                            </div>
                            <div class="ta-fo">${item.desc}</div>
                        </div>
                        </a>
                            `
                        })
                        $('.inner-last').append(html);

                    } 
                }
            })

           
            }
        }()

         // 获取当前时间
    var sj = new Date()
    var sjh = sj.getHours()
    var sjm = sj.getMinutes()
    var sjs = sj.getSeconds()
    $('.msg').html(sjh + ':' + sjm + ':' + sjs)

    // 点击上右三角 关闭弹窗
    $('.chat-sj').click(function () {
        $('.chat').hide();
    })

    // 用精灵图自动生成笑脸    
    $('.xlitem li');
    for (let i = 0; i < $('.xlitem li').length; i++) {
        var index = i * 25;
        $('.xlitem li')[i].style.backgroundPosition = '0 -0' + index + 'px ';
    }
    !function () {
        // 点击笑脸 出现弹窗
        var flag = true;
        $('.xl').click(function () {
            if (flag) {
                $('.xlitem').show()
                flag = false;
            } else {
                $('.xlitem').hide()
                flag = true;
            }
        })
        // 点击笑脸 笑脸对应的索引出现在内容框

        $('.xlitem ').on('click', 'li', function () {
            // $('.input').append($(this).html())
            $('.input').val($(this).index())

        })



        // 点击赞  出现弹窗
        $('.zan').click(function () {
            $('.zanitem').show()
        })

        // 点击关闭按钮 弹窗消失
        $('.gb').click(function () {
            $('.zanitem').hide()
        })

        // 点击笑脸 字体变色 背景颜色变化
        $('.eval').eq(0).click(function () {
            $(this).css({
                color: 'rgb(0, 206, 125)',
                backgroundColor: 'rgb(240, 240, 240)'
            }).siblings().css({
                color: 'rgb(102, 102, 102)',
                backgroundColor: '#fff'
            })
            // 元素内容存入本地
            localStorage.setItem('msg', $(this).text())
            // 获取元素最后样式
            // console.log($(this).css('color'));
            localStorage.setItem('color', $(this).css('color'))
        })
        $('.eval').eq(1).click(function () {
            $(this).css({
                color: 'rgb(255, 182, 82)',
                backgroundColor: 'rgb(240, 240, 240)'
            }).siblings().css({
                color: 'rgb(102, 102, 102)',
                backgroundColor: '#fff'
            })
            // 元素内容存入本地
            localStorage.setItem('msg', $(this).text())
            // 获取元素最后样式
            // console.log($(this).css('color'));
            localStorage.setItem('color', $(this).css('color'))
        })
        $('.eval').eq(2).click(function () {
            $(this).css({
                color: 'rgb(255, 92, 94)',
                backgroundColor: 'rgb(240, 240, 240)'
            }).siblings().css({
                color: 'rgb(102, 102, 102)',
                backgroundColor: '#fff'
            })
            // 元素内容存入本地
            localStorage.setItem('msg', $(this).text())
            // 获取元素最后样式
            // console.log($(this).css('color'));
            localStorage.setItem('color', $(this).css('color'))
        })

        // 点击提交按钮 关闭弹窗 把相应的内容渲染到页面
        $('.zan-four').click(function () {
            $('.zanitem').hide()
            // 创建并添加节点 div
            var newdiv = document.createElement('div');
            var conter = document.querySelector('.btn-conter');
            conter.appendChild(newdiv)
            // 创建并添加子节点 span
            var newspan = document.createElement('span');
            var div = document.querySelector('.btn-conter div');

            // 获取储存信息
            var text = localStorage.getItem('msg');
            var color = localStorage.getItem('color');
            newspan.innerHTML = text;
            newspan.style.color = color
            newdiv.innerHTML = '你给出了';

            // 获取输入的内容
            $('textarea').text()
            // console.log($('textarea').text());
            // console.log($('textarea').val());
            // 创建并添加子节点 p 
            var newp = document.createElement('p');
            var div = document.querySelectorAll('.btn-conter div');
            for (let i = 0; i < div.length; i++) {
                div[i].appendChild(newspan)
                div[i].appendChild(newp)
                newp.innerHTML = $('textarea').val();
            }

        })

        // 构造函数 获取当前时间
        function Swiper() {
            var data = new Date()
            this.h = data.getHours()
            this.m = data.getMinutes()
            this.s = data.getSeconds()
        }


        // 点击发送
        $('.fs').click(function () {

            // 创建并添加节点 div
            var fsdiv = document.createElement('div');
            var conter = document.querySelector('.btn-conter');
            conter.appendChild(fsdiv)
            fsdiv.classList.add('may')
            // 创建并添加子节点 p
            var fsp = document.createElement('p');
            // 创建并添加子节点 div
            var lastdiv = document.createElement('div');
            var div = document.querySelectorAll('.btn-conter .may');
            for (let i = 0; i < div.length; i++) {
                div[i].appendChild(fsp)
                div[i].appendChild(lastdiv)
            }
            var a = new Swiper()
            //   相应的内容渲染到页面 笑脸搞不定 只是是索引了
            var input=document.querySelector('.input')
            lastdiv.innerHTML=input.value
            fsp.innerHTML=a.h + ':' + a.m + ':' + a.s
        })
    }()

    </script>
</body>

</html>